<template>
  <div class="home">
   <van-cell-group class="my-info">
      <van-cell class="base-info" center :border="false">
        <van-image
         class="avatar"
         slot="icon"
         round
         fit="cover"
         :src="require('./../assets/logo.png')"
        />
        <div class="name" slot="title">admin</div>
      </van-cell>
      <div class="largeTitle">
        <div class="title">
          <span>今日作业人数</span>
          <span>{{eventCount}}</span>
        </div>
        <div class="title">
          <span>今日作业人数</span>
          <span>{{currTaskCount}}</span>
        </div>
        <div class="title">
          <span>今日作业人数</span>
          <span>{{currTaskPerCount}}</span>
        </div>
      </div>
    </van-cell-group>
    <van-grid :column-num="2" class="nav-grid mb-4">
      <van-grid-item icon="envelop-o" class="nav-grid-item" to="task" text="任务" />
      <van-grid-item icon="sign" class="nav-grid-item" to="event" text="事件" />
    </van-grid>
    <van-cell class="mb-5" title="修改密码" is-link to="/pwd"/>
    <van-cell class="logout-cell" title="退出登录"/>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data(){
    return{
      eventCount:1,
      currTaskCount:1,
      currTaskPerCount:1
    }
  },
  components: {
    
  },
  methods:{
    async geteventCount(){
      const res= await this.$axios({url:this.$location.getCurrEventCount});
      this.eventCount=res.data
    },
    async getCurrTaskCount(){
      const res= await this.$axios({url:this.$location.getCurrTaskCount});
      this.currTaskCount=res.data
    },
    async getCurrTaskPerCount(){
      const res=await this.$axios({url:this.$location.getCurrTaskPerCount});
      this.currTaskPerCount=res.data
    }
  },
  created(){
    this.geteventCount();
    this.getCurrTaskCount();
    this.getCurrTaskPerCount();
  }
}
</script>

<style lang="scss" scoped>
  .my-info{
    background: url("./../assets/bgd.jpg") no-repeat;
    .base-info{
      box-sizing: border-box;
      height: 115px;
      background-color: unset;
    }
    .avatar{
      box-sizing: border-box;
      width: 66px;
      height: 66px;
      border:1px solid #fff;
      margin-right: 11px;
    }
    .name{
      font-size: 15px;
      color: #fff;
    }
  }
  .largeTitle{
    display: flex;
    .title{
      display: flex;
      flex-direction: column;
      flex:1;
      align-items: center;
      color: #fff;
      font-size: 14px;
      margin-bottom: 20px;
      span{
        margin: 5px;
      }
    }
  }
  .mb-4{
    margin-bottom: 4px;
    color: coral;
  }
  .mb-5{
    color: rgb(157,154,173);
    margin-bottom: 4px;
  }
  .logout-cell{
    .van-cell__title{
      color: coral;
      text-align: center;
    }
  }
</style>
